<!-- views/purchase/components/SimpleSupplierDetail.vue -->
<template>
  <el-drawer
    v-model="visible"
    title="供应商详情"
    direction="rtl"
    size="600px"
    :before-close="handleClose"
  >
    <div class="supplier-detail" v-if="supplier">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="供应商名称" :span="2">
              {{ supplier.name }}
            </el-descriptions-item>
            <el-descriptions-item label="联系人">
              {{ supplier.contactPerson || supplier.contact || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">
              {{ supplier.phone || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              {{ supplier.email || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="地址" :span="2">
              {{ supplier.address || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="getStatusType(supplier.status)">
                {{ getStatusText(supplier.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="评分" :span="2">
              <el-rate
                :model-value="Number(supplier.rating)"
                :max="5"
                allow-half
                disabled
              />
              <span v-if="Number(supplier.rating) < 3.0" class="risk-indicator">
                <el-tooltip
                  effect="dark"
                  content="评分低于3.0，属于高风险供应商"
                  placement="top"
                >
                  <el-tag type="danger" size="small" class="risk-tag">
                    高风险
                  </el-tag>
                </el-tooltip>
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" :span="2">
              {{ formatDate(supplier.createdAt) }}
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">
              {{ supplier.remark || '无' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Supplier {
  id: number
  name: string
  contactPerson?: string
  contact?: string
  phone?: string
  email?: string
  address?: string
  status: string
  rating: number | string
  createdAt?: string
  remark?: string
}

const props = defineProps<{
  modelValue: boolean
  supplier: Supplier | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
}>()

// 使用计算属性正确处理v-model
const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value)
})

// 简化实现，不使用ref
const activeTab = 'basic'

const handleClose = () => {
  visible.value = false
  emit('close')
}

const getStatusType = (status: string) => {
  switch (status) {
    case 'active': return 'success'
    case 'pending': return 'warning'
    case 'suspended': return 'warning'
    case 'terminated': return 'danger'
    default: return 'info'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'active': return '合作中'
    case 'pending': return '待审核'
    case 'suspended': return '已暂停'
    case 'terminated': return '已终止'
    default: return '未知状态'
  }
}

const formatDate = (dateString: string | undefined) => {
  if (!dateString) return '-'
  try {
    const date = new Date(dateString)
    if (isNaN(date.getTime())) return dateString
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    })
  } catch (error) {
    return dateString
  }
}
</script>

<style scoped>
.supplier-detail {
  padding: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.risk-indicator {
  margin-left: 10px;
}

.risk-tag {
  cursor: help;
}
</style>